 <template>
<!--表单 begin-->
  <div style="padding: 10px 15px;" class="overflowY">
    <el-form :inline="true" ref="ruleForm" :rules="rules" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="手机号 : " prop="phoneVerification">
            <el-input clearable size="small" v-model="ruleForm.phoneVerification" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">手机号验证</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="邮箱 : " prop="emailVerification">
            <el-input size="small" v-model="ruleForm.emailVerification" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">邮箱验证</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="密码 : " prop="numVerification">
            <el-input size="small" v-model="ruleForm.numVerification" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">字符长度验证</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="日期 : " prop="dateSelection">
            <div class="searchTime" style="width: 100%">
              <el-date-picker
                size="small"
                v-model="ruleForm.dateSelection"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单日期选择框</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目编号 : " prop="itemNumber">
            <el-input size="small" v-model="ruleForm.itemNumber" placeholder="请输入项目编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单输入框</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="描述 : " prop="textarea">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="ruleForm.textarea">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单文本域</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="跟踪人 : ">
            <el-input size="small" v-model="ruleForm.trackingPeople" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单带搜索按钮的input</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-row  :gutter="10">
            <el-col :span="12"><el-form-item label="开始日期 : ">
              <div class="searchTime" style="width: 100%">
                <el-date-picker
                  size="small"
                  @change="timeClick"
                  v-model="ruleForm.beginTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-form-item></el-col>
            <el-col :span="12"><el-form-item label="结束日期 : ">
              <div class="searchTime" style="width: 100%">
                <el-date-picker
                  size="small"
                  v-model="ruleForm.endTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-form-item></el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单开始日期 - 结束日期</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目状态 : ">
            <el-select v-model="ruleForm.itemState" placeholder="请选择" size="small">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单下拉框</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="性别 : ">
            <el-radio-group v-model="ruleForm.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单单选框</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="栏目 : ">
            <el-checkbox-group v-model="ruleForm.checkList">
              <el-checkbox label="0">旅游</el-checkbox>
              <el-checkbox label="1">音乐</el-checkbox>
              <el-checkbox label="2">美术</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <span style="display: inline-block;vertical-align: middle;font-size: 14px;color: #ccc;margin-top: 8px;">表单复选框</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <base-card title="说明">
      <code>
        <span style="width: 100%;display: inline-block;">1、必填项设置，在el-form上通过rules属性传入约定的验证规则， el-form-item标签上添加prop属性设置为需要检验的字段名，最后在return里面定义rules</span>
        <span style="width: 100%;display: inline-block;">2、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
        <span style="width: 100%;display: inline-block;">3、rules表单验证，el-form-item上添加prop验证规则，prop值为当前需要验证的表单的绑定值，demo中提供了手机号、email和密码长度验证</span>
        <span style="width: 100%;display: inline-block;">4、使用clearable属性即可得到一个可清空的输入框</span>
        <span style="width: 100%;display: inline-block;">5、resetFields方法重置表单，el-form-item 上设置prop属性即可重置表单，不设置不重置</span>
        <span style="width: 100%;display: inline-block;">
          6、如果表单在dialog中，执行表单的验证提交，重置操作需要在外层加入 this.$nextTick(() => {}) -- 在DOM渲染结束后执行
          <p><pre><code>this.$nextTick(() =&gt; {<br>   // 要执行的代码<br>})</code></pre></p>
        </span>
        <span style="width: 100%;display: inline-block;">
          7、通过 disabled 属性指定是否禁用 input 组件
          <p><pre><code>&lt;el-input placeholder="请输入内容" v-model="input1" :disabled="true"&gt;&lt;/el-input&gt;</code></pre></p>
        </span>
        <span style="width: 100%;display: inline-block;">
          8、表单验证点击保存按钮的验证执行以下代码 -- 添加一下代码（并且在form上添加 ref 属性 -- ref="xxx" formName 即为传入的ref值）
          <p><pre><code>this.$refs[formName].validate((valid) =&gt; {<br>    if (valid) {<br>        alert('submit!');<br>    } else {<br>        console.log('error submit!!');<br>        return false;<br>    }<br>});</code></pre></p>
        </span>
      </code>
    </base-card>
    <base-card title="HTML">
      <pre><code>    &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>      &lt;el-form :inline="true" :rules="rules" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small"&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="手机号 : " prop="phoneVerification"&gt;<br>            &lt;el-input clearable size="small" v-model="ruleForm.phoneVerification" placeholder="请输入手机号"&gt;&lt;/el-input&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="邮箱 : " prop="emailVerification"&gt;<br>            &lt;el-input size="small" v-model="ruleForm.emailVerification" placeholder="请输入邮箱"&gt;&lt;/el-input&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="密码 : " prop="numVerification"&gt;<br>            &lt;el-input size="small" v-model="ruleForm.numVerification" placeholder="请输入"&gt;&lt;/el-input&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="日期 : " prop="dateSelection"&gt;<br>            &lt;div class="searchTime" style="width: 100%"&gt;<br>              &lt;el-date-picker<br>                size="small"<br>                v-model="ruleForm.dateSelection"<br>                type="date"<br>                placeholder="选择日期"&gt;<br>              &lt;/el-date-picker&gt;<br>            &lt;/div&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="项目编号 : " prop="itemNumber"&gt;<br>            &lt;el-input size="small" v-model="ruleForm.itemNumber" placeholder="请输入项目编号"&gt;&lt;/el-input&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="描述 : "&gt;<br>            &lt;el-input<br>              type="textarea"<br>              :rows="2"<br>              placeholder="请输入内容"<br>              v-model="ruleForm.textarea"&gt;<br>            &lt;/el-input&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="跟踪人 : "&gt;<br>            &lt;el-input size="small" v-model="ruleForm.trackingPeople" placeholder="请选择" suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-row  :gutter="10"&gt;<br>            &lt;el-col :span="12"&gt;&lt;el-form-item label="开始日期 : "&gt;<br>              &lt;div class="searchTime" style="width: 100%"&gt;<br>                &lt;el-date-picker<br>                  size="small"<br>                  v-model="ruleForm.beginTime"<br>                  type="date"<br>                  placeholder="选择日期"&gt;<br>                &lt;/el-date-picker&gt;<br>              &lt;/div&gt;<br>            &lt;/el-form-item&gt;&lt;/el-col&gt;<br>            &lt;el-col :span="12"&gt;&lt;el-form-item label="结束日期 : "&gt;<br>              &lt;div class="searchTime" style="width: 100%"&gt;<br>                &lt;el-date-picker<br>                  size="small"<br>                  v-model="ruleForm.endTime"<br>                  type="date"<br>                  placeholder="选择日期"&gt;<br>                &lt;/el-date-picker&gt;<br>              &lt;/div&gt;<br>            &lt;/el-form-item&gt;&lt;/el-col&gt;<br>          &lt;/el-row&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="项目状态 : "&gt;<br>            &lt;el-select v-model="ruleForm.itemState" placeholder="请选择" size="small"&gt;<br>              &lt;el-option<br>                v-for="item in options2"<br>                :key="item.value"<br>                :label="item.label"<br>                :value="item.value"&gt;<br>              &lt;/el-option&gt;<br>            &lt;/el-select&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="性别 : "&gt;<br>            &lt;el-radio-group v-model="ruleForm.gender"&gt;<br>              &lt;el-radio :label="0"&gt;男&lt;/el-radio&gt;<br>              &lt;el-radio :label="1"&gt;女&lt;/el-radio&gt;<br>            &lt;/el-radio-group&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>      &lt;el-row&gt;<br>        &lt;el-col :span="24"&gt;<br>          &lt;el-form-item label="栏目 : "&gt;<br>            &lt;el-checkbox-group v-model="ruleForm.checkList"&gt;<br>              &lt;el-checkbox label="0"&gt;旅游&lt;/el-checkbox&gt;<br>              &lt;el-checkbox label="1"&gt;音乐&lt;/el-checkbox&gt;<br>              &lt;el-checkbox label="2"&gt;美术&lt;/el-checkbox&gt;<br>            &lt;/el-checkbox-group&gt;<br>          &lt;/el-form-item&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>     &lt;el-row&gt;<br>          &lt;el-col :span="24"&gt;<br>           &lt;el-form-item&gt;<br>              &lt;el-button @click="resetForm('ruleForm')"&gt;重置&lt;/el-button&gt;<br>           &lt;/el-form-item&gt;<br>          &lt;/el-col&gt;<br>     &lt;/el-row&gt;  <br>  &lt;/el-form&gt;<br>&lt;/div&gt;</code></pre>
    </base-card>
    <base-card title="JS">
      <pre><code>import BaseCard from '@/components/BaseCard/BaseCard'<br>export default {<br>  components: {<br>    BaseCard<br>  },<br>  data() {<br>    var changePhone = (rule, value, callback) =&gt; {<br>      console.log(value)<br>      if (!value) {<br>        return callback(new Error('手机号不能为空'))<br>      }<br>      setTimeout(() =&gt; {<br>        var reg = /^[1][3,4,5,7,8][0-9]{9}$/<br>        var regus = new RegExp(reg)<br>        if (regus.test(value)) {<br>          callback()<br>        } else {<br>          callback(new Error('请输入正确的手机号'))<br>        }<br>      }, 100)<br>    }<br>    var changeEmail = (rule, value, callback) =&gt; {<br>      if (!value) {<br>        return callback(new Error('邮箱不能为空'))<br>      }<br>      setTimeout(() =&gt; {<br>        var reg = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/<br>        var regus = new RegExp(reg)<br>        if (regus.test(value)) {<br>          callback()<br>        } else {<br>          callback(new Error('请输入正确的邮箱'))<br>        }<br>      }, 100)<br>    }<br>    var changeNum = (rule, value, callback) =&gt; {<br>      if (!value) {<br>        return callback(new Error('密码不能为空'))<br>      }<br>      setTimeout(() =&gt; {<br>        // var reg = '^\\d{0,6}$'<br>        // var regus = new RegExp(reg)<br>        console.log(value.length)<br>        if (value.length &gt; 6) {<br>          callback()<br>        } else {<br>          callback(new Error('密码长度必须大于6位'))<br>        }<br>      }, 100)<br>    }<br>    return {<br>      options2: [{<br>        value: '0',<br>        label: '开始'<br>      }, {<br>        value: '1',<br>        label: '未开始'<br>      }],<br>      ruleForm: {<br>        phoneVerification: '',<br>        emailVerification: '',<br>        numVerification: '',<br>        dateSelection: '',<br>        itemNumber: '',<br>        textarea: '',<br>        beginTime: '',<br>        endTime: '',<br>        itemState: '',<br>        trackingPeople: '',<br>        gender: 0,<br>        checkList: ['0']<br>      },<br>      rules: {<br>        phoneVerification: [ // 手机号验证<br>          { required: true, validator: changePhone, trigger: 'blur' }<br>        ],<br>        emailVerification: [ // 邮箱验证<br>          { required: true, validator: changeEmail, trigger: 'blur' }<br>        ],<br>        numVerification: [ // 长度验证<br>          { required: true, validator: changeNum, trigger: 'blur' }<br>        ],<br>        dateSelection: [<br>          { required: true, message: '请选择日期', trigger: 'blur' }<br>        ],<br>        itemNumber: [<br>          { required: true, message: '请输入项目编号', trigger: 'blur' }<br>        ]<br>      }<br>    }<br>  },<br>  methods: {<br>    resetForm(formName) {<br>      console.log(this.$refs)<br>      this.$refs[formName].resetFields()<br>    },<br>    timeClick() {<br>      if (!this.ruleForm.beginTime) {<br>        this.ruleForm.beginTime = ''<br>      }<br>      console.log(this.ruleForm.beginTime)<br>    }<br>  }<br>}</code></pre>
    </base-card>
    <base-card title="CSS">
      <pre><code>&lt;style scoped&gt;<br>   .searchTime &gt; div{<br>     width: 100%;<br>   }<br>   .conponentForm &gt;&gt;&gt; .el-form-item__content{<br>     width: calc(100% - 90px);<br>   }<br>   .conponentForm &gt;&gt;&gt; .el-form-item{<br>     width: 100%;<br>   }<br>&lt;/style&gt;</code></pre>
    </base-card>
  </div>
<!--表单 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  },
  data() {
    var changePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      }
      setTimeout(() => {
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/
        var regus = new RegExp(reg)
        if (regus.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号'))
        }
      }, 100)
    }
    var changeEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        var reg = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        var regus = new RegExp(reg)
        if (regus.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱'))
        }
      }, 100)
    }
    var changeNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        // var reg = '^\\d{0,6}$'
        // var regus = new RegExp(reg)
        if (value.length > 6) {
          callback()
        } else {
          callback(new Error('密码长度必须大于6位'))
        }
      }, 100)
    }
    return {
      options2: [{
        value: '0',
        label: '开始'
      }, {
        value: '1',
        label: '未开始'
      }],
      ruleForm: {
        phoneVerification: '',
        emailVerification: '',
        numVerification: '',
        dateSelection: '',
        itemNumber: '',
        textarea: '',
        beginTime: '',
        endTime: '',
        itemState: '',
        trackingPeople: '',
        gender: 0,
        checkList: ['0']
      },
      rules: {
        phoneVerification: [ // 手机号验证
          { required: true, validator: changePhone, trigger: 'blur' }
        ],
        emailVerification: [ // 邮箱验证
          { required: true, validator: changeEmail, trigger: 'blur' }
        ],
        numVerification: [ // 长度验证
          { required: true, validator: changeNum, trigger: 'blur' }
        ],
        dateSelection: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        itemNumber: [
          { required: true, message: '请输入项目编号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    timeClick() {
      if (!this.ruleForm.beginTime) {
        this.ruleForm.beginTime = ''
      }
    }
  }
}
</script>
 <style scoped>
   .searchTime > div{
     width: 100%;
   }
   .conponentForm >>> .el-form-item__content{
     width: calc(100% - 90px);
   }
   .conponentForm >>> .el-form-item{
     width: 100%;
   }
 </style>

